<template>
	<view class="conter">
		<uni-nav-bar :fixed="true" shadow :background-color="navClor" status-bar title="中医数字" :border="false" :shadow="false" />
		<view class="top">
			<view class="topTitle">
				招募推广员轻松赚大钱
			</view>
			<view class="topTab">
				<view class="topTabsp" src="../../static/cjsp.png">创建视频</view>
				<view class="topTabxx" src="../../static/dzxx.png">定制形象</view>
				<view class="topTabsy" src="../../static/dzsy.png">定制声音</view>
			</view>
		</view>
		<view class="conterBox">
			<view class="conterBox_title">
				<view class="" v-for="item in tabList" :key="item.id" @click="tabChangeClick(item.id)"
					:class="[tabChange === item.id ? 'tabChange' : 'tabItem']" v-text="item.txt"></view>
			</view>
			<view class="conterBox_Bom">
				<view class="bom_left">
					<view class="bom_left_txt">
						数字分身
					</view>
					<view class="bom_left_text">
						上传视频，快速生成
						你的数字分身
					</view>
					<image src="../../static/fsBomLeft.png" mode=""></image>
					<button class="bom_btn">快速复刻</button>
				</view>
				<view class="bom_right">
					<video src=""></video>
					<button class="bom_right_btn">去制作</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					id: 1,
					txt: "形象"
				}, {
					id: 2,
					txt: "声音"
				}],
				tabChange: 1,
				statusBarHeight: 120,
				navClor: "rgba(255, 255, 255, 0)"
			}
		},
		methods: {
			tabChangeClick(id) {
				this.tabChange = id
			}
		},
		// onLoad() {
		// 	let height = uni.getSystemInfoSync().statusBarHeight //状态栏高度
		// 	let heigths = uni.getMenuButtonBoundingClientRect().height
		// 	let statusHeight = height + heigths
		// 	console.log(statusHeight);
		// 	this.statusBarHeight = statusHeight
		// },
		
		onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
	}
</script>

<style lang="scss">
	.conter {
		background-image: url("https://a1.qpic.cn/psc?/V12obLfG48bPoN/TmEUgtj9EK6.7V8ajmQrELQEdpWFggBvaieRar6Xa4DOxEGpaDeohRAvM62gkDhnick*qTVD1iFmL*K8cKoBr5bs5fwtKHgPAHDPQAlb5ig!/b&ek=1&kp=1&pt=0&bo=0ALgBdAC4AUDJwI!&tl=1&vuin=2664244587&tm=1734156000&dis_t=1734158548&dis_k=970bc0677d7ee2e1f4977efe3086caec&sce=60-2-2&rf=viewer_4");
		width: 100vw;
		height: 100vh;

		.top {
			display: flex;
			flex-wrap: wrap;
			gap: 25rpx;
			padding: 25rpx;

			.topTitle {
				height: 274rpx;
				width: 100%;
				background-image: linear-gradient(to bottom right, #FEC35C, #F95710);
				font-family: AlibabaPuHuiTiB;
				font-weight: 400;
				font-size: 51rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 21.88rpx;
			}

			.topTab {
				height: 150rpx;
				width: 100%;
				display: flex;
				gap: 12.5rpx;

				.topTabsp {
					border-radius: 17.71rpx;
					width: 100%;
					background-image: linear-gradient(to bottom right, #68E0CF, #00B3E7);
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 63rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.topTabxx {
					border-radius: 17.71rpx;
					width: 100%;
					background-image: linear-gradient(to bottom right, #75D0FA, #0088FB);
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 63rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.topTabsy {
					border-radius: 17.71rpx;
					width: 100%;
					background-image: linear-gradient(to bottom right, #C872F2, #F772D1);
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 63rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.conterBox {
			margin-top: 20rpx;
			height: 760rpx;
			background-color: #FFFFFF;
			box-shadow: -10rpx -11rpx 26rpx 4rpx rgba(127, 192, 176, 0.11);
			border-radius: 47rpx 47rpx 0rpx 0rpx;

			.conterBox_title {
				padding-left: 60rpx;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: start;
				width: 100%;
				gap: 40rpx;

				.tabItem {
					height: 60rpx;
					width: 80rpx;
					font-family: AlibabaPuHuiTiR;
					font-size: 35rpx;
					color: #000000;
				}

				.tabChange {
					height: 60rpx;
					width: 80rpx;
					font-family: AlibabaPuHuiTiB;
					color: #00C9D4;

					// font-weight: bold;
					&::after {
						content: " ";
						display: block;
						width: 60rpx;
						height: 6rpx;
						border-radius: 8rpx;
						overflow: hidden;
						margin: 10rpx auto 0;
						background: #00C9D4;
					}
				}

			}

			.conterBox_Bom {
				height: calc(100% - 120rpx);
				padding: 40rpx 20rpx 0;
				box-sizing: border-box;
				display: flex;
				gap: 36rpx;

				.bom_left {
					width: 50%;
					background-color: #F7F9FF;
					border-radius: 26.04rpx;
					padding-top: 40rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-content: flex-start;

					.bom_left_txt {
						height: 80rpx;
						font-family: SourceHanSansCN;
						font-weight: 800;
						font-size: 51rpx;
						color: #4FACFE;
					}

					.bom_left_text {
						padding: 0 40rpx;
						height: 80rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 27rpx;
						color: #4FACFE;
						line-height: 42rpx;
					}

					>image {
						width: 260rpx;
						height: 240rpx;
					}

					.bom_btn {
						width: 254.17rpx;
						height: 69.79rpx;
						background-image: linear-gradient(to bottom right, #00F2FE, #4FACFE);
						border-radius: 34.38rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 36rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						border: none;

						&::after {
							border: none;
						}
					}

				}

				.bom_right {
					border-radius: 26.04rpx;
					width: 50%;
					background-color: #F7F9FF;
					border-radius: 26.04rpx;
					position: relative;
					&>video{
						border-radius: 26.04rpx;
						width: 100%;
						height: 100%;
					}
					.bom_right_btn {
						z-index: 10;
						position: absolute;
						right: 27rpx;
						bottom: 25rpx;
						width: 122.92rpx;
						height: 38.54rpx;
						background-image: linear-gradient(to bottom right, #00F2FE, #4FACFE);
						border-radius: 18.75rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 38rpx;
						color: #FFFFFF;
						border: none;

						&::after {
							border: none;
						}
					}
				}

			}
		}

	}
</style>